import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { NavLink } from 'react-router-dom';
import SettingStyle from '@/page/setting/setting.scss';
import { Menu, Dropdown, Icon } from 'antd';
const unReadNum = {
    display: 'inline-block',
    color: 'white',
    minWidth: 17,
    paddingLeft: 2,
    paddingRight: 2,
    paddingBottom: 2,
    float: 'right',
    backgroundColor: '#FFC551',
    fontSize: 13,

    textAlign: 'center'
};
const selectBtn = {
    fontSize: 14,
    paddingLeft: 40,
    paddingRight: 40,
    paddingTop: 10,
    paddingBottom: 10
};

class ButtonGroup extends Component {
    static propTypes = {
        msg_count: PropTypes.object,
        onChange: PropTypes.func.isRequired
    };
    render() {
        const { msg_count } = this.props;
        const menu = (
            <Menu>
                <Menu.Item>
                    <a href="javascript:void(0)" onClick={() => this.props.onChange('')}>全部消息<span style={ unReadNum }>{msg_count.all}</span></a>
                </Menu.Item>
                <Menu.Item>
                    <a href="javascript:void(0)" onClick={() => this.props.onChange(1)}>已读消息<span style={ unReadNum }>{msg_count.read}</span></a>
                </Menu.Item>
                <Menu.Item>
                    <a href="javascript:void(0)" onClick={() => this.props.onChange(0)}>未读消息<span style={ unReadNum }>{msg_count.unRead}</span></a>
                </Menu.Item>
            </Menu>
        );
        return (
            <div className={SettingStyle['message-manage-button-group']}>
                <Dropdown overlay={menu}>
                    <a className={`ant-dropdown-link ${SettingStyle['message-type-dropdown']}`} href="javascript:void(0);">
                        选择全部类型 <Icon type="down" />
                    </a>
                </Dropdown>
                <NavLink className={SettingStyle['link-btn']} exact to="/设置/消息管理" activeClassName={SettingStyle['active']}>房租消息</NavLink>
                <NavLink className={SettingStyle['link-btn']} exact to="/设置/消息管理/合同" activeClassName={SettingStyle['active']}>合同消息</NavLink>
                <NavLink className={SettingStyle['link-btn']} exact to="/设置/消息管理/逾期" activeClassName={SettingStyle['active']}>逾期消息</NavLink>
                <NavLink className={SettingStyle['link-btn']} exact to="/设置/消息管理/系统" activeClassName={SettingStyle['active']}>系统消息</NavLink>
            </div>
        );
    }
}

export default ButtonGroup;